<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <image class="avatar" :src="user.avatar" />
      <view class="user-main">
        <text class="user-name">{{ user.name }}</text>
        <view class="user-meta">
          <text>{{ user.following }} 关注</text>
          <text>{{ user.followers }} 粉丝</text>
        </view>
      </view>
      <image v-if="user.verified" class="verified" src="https://img.icons8.com/color/48/verified-badge.png" />
    </view>

    <!-- 统计区 -->
    <view class="stats-row">
      <view class="stat-item" v-for="item in stats" :key="item.label">
        <text class="stat-value">{{ item.value }}</text>
        <text class="stat-label">{{ item.label }}</text>
      </view>
    </view>

    <!-- 我的账户 -->
    <view class="section">
      <text class="section-title">我的账户</text>
      <view class="icon-grid">
        <view class="icon-item" v-for="item in accountIcons" :key="item.label">
          <image :src="item.icon" class="icon-img" />
          <text class="icon-label">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <!-- 我的内容 -->
    <view class="section">
      <text class="section-title">我的内容</text>
      <view class="icon-grid">
        <view class="icon-item" v-for="item in contentIcons" :key="item.label">
          <image :src="item.icon" class="icon-img" />
          <text class="icon-label">{{ item.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const user = {
  avatar: 'https://piccdn.umiwi.com/uploader/image/note/2022051223/1774219164270019608?x-oss-process=image/resize,w_84,m_lfit',
  name: '雍珑庚',
  following: 428,
  followers: 243,
  verified: true
}
const stats = [
  { value: 798, label: '学分' },
  { value: 27, label: '今日学习' },
  { value: 140, label: '勋章' },
  { value: 43, label: '证书' }
]
const accountIcons = [
  { icon: 'https://img.icons8.com/ios/50/wallet--v1.png', label: '账户' },
  { icon: 'https://img.icons8.com/ios/50/ticket.png', label: '卡券' },
  { icon: 'https://img.icons8.com/ios/50/purchase-order.png', label: '订单' },
  { icon: 'https://img.icons8.com/ios/50/shopping-cart.png', label: '购物车' },
  { icon: 'https://img.icons8.com/ios/50/crown.png', label: '会员' },
  { icon: 'https://img.icons8.com/ios/50/thumb-up.png', label: '赞赏' },
  { icon: 'https://img.icons8.com/ios/50/ticket-confirmed.png', label: '活动门票' },
  { icon: 'https://img.icons8.com/ios/50/coins.png', label: '积分' },
  { icon: 'https://img.icons8.com/ios/50/coins.png', label: '积分' },
  { icon: 'https://img.icons8.com/ios/50/coins.png', label: '积分' }
]
const contentIcons = [
  { icon: 'https://img.icons8.com/ios/50/bookmark-ribbon--v1.png', label: '笔记' },
  { icon: 'https://img.icons8.com/ios/50/graduation-cap.png', label: '高研院' },
  { icon: 'https://img.icons8.com/ios/50/clock--v1.png', label: '最近学习' },
  { icon: 'https://img.icons8.com/ios/50/downloads.png', label: '下载' },
  { icon: 'https://img.icons8.com/ios/50/like--v1.png', label: '收藏' },
  { icon: 'https://img.icons8.com/ios/50/appointment-reminders--v1.png', label: '订阅通知' },
  { icon: 'https://img.icons8.com/ios/50/video-call.png', label: '直播' },
  { icon: 'https://img.icons8.com/ios/50/video-call.png', label: '直播' },
  { icon: 'https://img.icons8.com/ios/50/video-call.png', label: '直播' },
  { icon: 'https://img.icons8.com/ios/50/video-call.png', label: '直播' },
  
  
]
</script>

<style scoped>
.container {
  background: #f7f8fa;
  min-height: 100vh;
  padding: 24rpx 0 0 0;
}
.user-card {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 24rpx 18rpx 24rpx;
  padding: 32rpx 24rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  position: relative;
}
.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  object-fit: cover;
}
.user-main {
  flex: 1;
}
.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
}
.user-meta {
  margin-top: 8rpx;
  color: #888;
  font-size: 24rpx;
  display: flex;
  gap: 24rpx;
}
.verified {
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  left: 80rpx;
  top: 80rpx;
}
.stats-row {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 24rpx 18rpx 24rpx;
  padding: 24rpx 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
}
.stat-label {
  font-size: 22rpx;
  color: #888;
  margin-top: 4rpx;
}
.section {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 24rpx 18rpx 24rpx;
  padding: 24rpx 0 12rpx 0;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #222;
  margin-left: 24rpx;
  margin-bottom: 12rpx;
  display: block;
}
.icon-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 12rpx;
}
.icon-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24rpx;
}
.icon-img {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 8rpx;
}
.icon-label {
  font-size: 22rpx;
  color: #555;
}
</style>